@import  './../../../style/font';
@import './../../../style/color';

.card-title-style {
  position: relative;
  .card-body {
    display: inline-block;
    background-color: $btn-border-color;
    height: 70px;
    position: relative;
    z-index: -100;

    .card-body-triangle {
      position: absolute;
      right: 0;
      z-index: -20;
      top: 0;
      width: 0;
      height: 0;
      border-top: 70px solid #f8fafa;
      border-left: 70px solid transparent;
    }

    .title-text {
      font-family: $DFYuanW7-GBK;
      font-size: 30px;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 70px;
      display: inline-block;
      margin-left: 33px;
      padding-right: 70px;
    }
  }

  .card-line{
    height: 10px;
    width: 100%;
    background-color: $btn-border-color;
    position: absolute;
    bottom: 0;
    z-index: -10;
  }
  @mixin card-parallelogram {
    z-index: -1;
    position: absolute;
    margin-right: 5px;
    width: 6px;
    height: 10px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    background: #FFFFFF;
  }
  .card-parallelogram-1{
    @include card-parallelogram;
    right: -7px;
  }
  .card-parallelogram-2{
    @include card-parallelogram;
    right: 4px;
  }
  .card-parallelogram-3{
    @include card-parallelogram;
    right: 15px;
  }
  .card-parallelogram-4{
    @include card-parallelogram;
    right: 26px;
  }

}
@media screen and (max-width: 1919px) {
  .card-title-style {
    position: relative;
    .card-body {
      display: inline-block;
      background-color: $btn-border-color;
      height: 50px;
      position: relative;
      z-index: -100;

      .card-body-triangle {
        position: absolute;
        right: 0;
        z-index: -20;
        top: 0;
        width: 0;
        height: 0;
        border-top: 70px solid #f8fafa;
        border-left: 70px solid transparent;
      }

      .title-text {
        font-family: $DFYuanW7-GBK;
        font-size: 22px;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 50px;
        display: inline-block;
        margin-left: 20px;
        padding-right: 70px;
      }
    }

    .card-line{
      height: 10px;
      width: 100%;
      background-color: $btn-border-color;
      position: absolute;
      bottom: 0;
      z-index: -10;
    }
    @mixin card-parallelogram {
      z-index: -1;
      position: absolute;
      margin-right: 5px;
      width: 6px;
      height: 10px;
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      background: #FFFFFF;
    }
    .card-parallelogram-1{
      @include card-parallelogram;
      right: -7px;
    }
    .card-parallelogram-2{
      @include card-parallelogram;
      right: 4px;
    }
    .card-parallelogram-3{
      @include card-parallelogram;
      right: 15px;
    }
    .card-parallelogram-4{
      @include card-parallelogram;
      right: 26px;
    }

  }
}

.v-card-title-style {
  position: relative;
  .card-body {
    display: inline-block;
    background-color: $btn-border-color;
    height: 50px;
    position: relative;
    z-index: 10;

    .card-body-triangle {
      position: absolute;
      right: -1px;
      z-index: 1;
      top: 0;
      width: 0;
      height: 0;
      border-top: 50px solid #f8fafa;
      border-left: 70px solid transparent;
    }

    .title-text {
      font-family: $DFYuanW7-GBK;
      font-size: 30px;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 50px;
      display: inline-block;
      margin-left: 20px;
      padding-right: 70px;
    }
  }

  .card-line{
    height: 10px;
    width: 100%;
    background-color: $btn-border-color;
    position: absolute;
    bottom: 0;
    z-index: 30;
  }
  @mixin card-parallelogram {
    z-index: -1;
    position: absolute;
    margin-right: 5px;
    width: 6px;
    height: 10px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    background: #FFFFFF;
  }
  .card-parallelogram-1{
    @include card-parallelogram;
    right: -7px;
  }
  .card-parallelogram-2{
    @include card-parallelogram;
    right: 4px;
  }
  .card-parallelogram-3{
    @include card-parallelogram;
    right: 15px;
  }
  .card-parallelogram-4{
    @include card-parallelogram;
    right: 26px;
  }

}
